import { GetCourse, VerifyCourseApply } from "../../utils/data/apis";
import { event } from "../../utils/interface";
import msg from "../../utils/model/msg"

/**
 * @interface 筛选内容按钮通讯范式
 */
interface Filter {
  detail: {
    type: string;
    status: '0' | '1';
  }
}
// pages/course/index.ts
Page({

  /**
   * 页面的初始数据
   */
  data: {
    courses: '', // 页面显示-课程 
    type: [], // 活动类型
    status: [], // 活动状态
    duration: [], // 活动时长
    startTime: '', // 活动开始时间
    endTime: '', // 活动结束时间
    region: [], // 活动地区
    filterActive: false, // 筛选框是否被激活
    filterReset: false, // 是否重置筛选框，通过这一项使子组件重新渲染达到重置效果
  },
  /**
   * @function 筛选框按钮被点击
   */
  toFilter: function () {
    this.setData({
      filterActive: !this.data.filterActive
    })
  },
  
  /**
   * @function 获取课程数据
   * @description type: 课程类型 => ['亲子活动'|'研学课程'|'冬夏令营']
   */
  getData: function () {
    msg.Loading();
    const that = this;
    let type: Array<'亲子活动' | '研学课程' | '冬夏令营'> | '' = ''; // 课程类型
    let status: Array<'未开始报名' | '已开始报名' | '活动未开始' | '活动进行中' | '活动已结束'> | '' = ''; // 课程状态
    let duration: '短途'|'长途'|'' = ''; // 课程时长 *长途短途不能同时选择
    let startTime: string = ''; // 开始时间
    let endTime: string = ''; // 结束时间
    let province: string = ''; // 省份
    let city: string = ''; // 城市
    if(this.data.type.length > 0) {
      // 有筛选条件 
      type = this.data.type.filter(item => {
        return item == '亲子活动' || '研学课程' || '冬夏令营';
      })
    }
    if(this.data.status.length > 0) {
      status = this.data.status.filter(item => {
        return item == '未开始报名' || '已开始报名' || '活动未开始' || '活动进行中' || '活动已结束';
      })
    }
    if(this.data.duration.length == 1) {
      duration = this.data.duration[0];
    }
    if(this.data.startTime.length && this.data.endTime.length) {
      startTime = this.data.startTime,
      endTime = this.data.endTime;
    }
    if(this.data.region.length == 3) {
      province = this.data.region[0],
      city = this.data.region[1];
    } 
    // 为空的项相当于全真
    GetCourse({
      keyword: '',
      province: province,
      city: city,
      start_time: startTime,
      end_time: endTime,
      activeStatus: status,
      duration: duration,
      type: type,
    })
    .then((res: any) => {
      if(res.data.data) {
        console.log(res.data.data);
        that.setData({
          courses: res.data.data,
        })
      }
      else {
        msg.Fail("获取课程失败");
      }
      msg.HideLoading();
    }) // GetCourse 回调
    .catch(err => {
      console.error(err);
      msg.Fail("获取课程失败");
      msg.HideLoading();
    }) // GetCourse 回调
    this.setData({
      // 收回筛选框
      filterActive: false,
    })
  },
  /**
   * @function 跳转课程详情 
   */
  toCourseDetail: function(e: event) {
    const id: string = e.detail.type.id; // 课程id
    const id_flag: string = wx.getStorageSync('id_flag'); // 用户身份
    if(e.detail.type.isOnly && id_flag != 'teacher') {
      // 有些课程需要绑定学校才可以进入
      msg.Modal('', '输入活动密码', true, true, '密码')
      .then((res: any) => {
        if(!res.confirm) {
          return;
        }
        const password = res.content;
        msg.Loading();
        VerifyCourseApply({
          courseid: id,
          password: password
        })
        .then((res: any) => {
          msg.HideLoading();
          if(res.data.data.msg != '密码正确') {
            msg.Fail('密码错误');
            return;
          }
          msg.Success('密码正确');
          setTimeout(() => {
            wx.navigateTo({
              url: `../detail/course/index?id=${id}`,
            })
          }, 250)
        }) // 验证密码
        .catch(() => {
          msg.HideLoading();
          msg.Fail('网络错误');
        })
      })
      return;
    }
    setTimeout(() => {
      wx.navigateTo({
        url: `../detail/course/index?id=${id}`,
      })
    }, 250)
  },
  /**
   * @function 捕捉到地区选择器子组件通信
   */
  regionChange: function(e: event) {
    this.setData({
      region: e.detail.value,
    })
  },
  /**
   * @function 活动类型改变
   */
  typeChange: function(e: Filter) {
    let type: any = this.data.type;
    if(e.detail.status == '0') {
      // 删除
      if(type.indexOf(e.detail.type) >= 0) {
        type.splice(type.indexOf(e.detail.type), 1);
      }
    }
    else {
      // 新增
      if(type.indexOf(e.detail.type) < 0) {
        type.push(e.detail.type);
      }
    }
    this.setData({
      type: type,
    })
  },
  /**
   * @function 活动时长改变
   */
  durationChange: function(e: Filter) {
    let duration: any = this.data.duration;
    if(e.detail.status == '0') {
      // 删除
      if(duration.indexOf(e.detail.type) >= 0) {
        duration.splice(duration.indexOf(e.detail.type), 1);
      }
    }
    else {
      // 新增
      if(duration.indexOf(e.detail.type) < 0) {
        duration.push(e.detail.type);
      }
    }
    this.setData({
      duration: duration,
    })
  },
  /**
   * @function 活动状态改变
   */
  statusChange: function(e: Filter) {
    let status: any = this.data.status;
    if(e.detail.status == '0') {
      // 删除
      if(status.indexOf(e.detail.type) >= 0) {
        status.splice(status.indexOf(e.detail.type), 1);
      }
    }
    else {
      // 新增
      if(status.indexOf(e.detail.type) < 0) {
        status.push(e.detail.type);
      }
    }
    this.setData({
      status: status,
    })
  },
  /**
   * @function 开始时间改变
   */
  dateChange: function(e: event) {
    const type = e.detail.type;
    if(type == '开始时间') {
      this.setData({
        startTime: e.detail.data,
      })
    }
    if(type == '结束时间') {
      this.setData({
        endTime: e.detail.data,
      })
    }
  },
  /**
   * @function 重置筛选条件
   */
  filterReset: function() {
    // 清空已有条件
    this.setData({
      region: [],
      startTime: '',
      endTime: '',
      type: [],
      duration: [],
      status: [],
      filterReset: true, // 关闭组件渲染
    })
    msg.Loading();
    const that = this;
    setTimeout(() => {
      that.setData({
        filterReset: false, // 重新渲染
      })
      msg.HideLoading();
    }, 200);
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    this.getData();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})